<template>
	<view>
		<view class="main-bg-color text-white p-4 d-flex a-end j-sb" style="height: 300rpx;">
			<view class="mb-3">
				<view class="font-lg">卖家已发货</view>
				<view class="font">还差7天自动确认收货</view>
			</view>
			<view class="iconfont icon-daishouhuo line-h mb-3" style="font-size: 100rpx;"></view>
		</view>
		<view class="p-3 bg-white d-flex flex-column">
			<view class="d-flex flex-row a-end">
				<text class="font-lg line-h">强强</text>
				<text class="font-md text-light-muted ml-2 line-h">183****1111</text>
			</view>
			<view class="font-md text-light-muted mt-2"><text class="line-h">北京-北京市-丰台区 xxx街道</text></view>
		</view>

		<!-- 商品列表 -->
		<divider></divider>

		<view class="px-2">
			<block v-for="(item, index) in orderItems" :key="index">
				<order-list-item :item="item" :index="index" :clickable="true"></order-list-item>
			</block>
		</view>
		
		<divider></divider>
		<uni-list>
			<uni-list-item >
				<view slot="body" class="d-flex flex-row flex-1 j-sb px-2">
					<text>商品总价</text>
					<text>¥3999</text>
				</view>
			</uni-list-item>
			<uni-list-item >
				<view slot="body" class="d-flex flex-row flex-1 j-sb px-2">
					<text>快递</text>
					<text>¥10</text>
				</view>
			</uni-list-item>
			<uni-list-item >
				<view slot="body" class="d-flex flex-row flex-1 j-sb px-2">
					<text>优惠券</text>
					<text>- ¥20</text>
				</view>
			</uni-list-item>
			<uni-list-item >
				<view slot="body" class="d-flex flex-row flex-1 j-sb px-2">
					<text class="main-text-color">实际付款</text>
					<text class="main-text-color">¥3999</text>
				</view>
			</uni-list-item>
		</uni-list>
		<divider></divider>
		<card title="订单信息">
			<uni-list>
				<uni-list-item >
					<view slot="body" class="d-flex flex-row flex-1 j-sb px-2">
						<text>订单编号</text>
						<text>1201100100100101010100</text>
					</view>
				</uni-list-item>
			</uni-list>
		</card>
	</view>
</template>

<script>
import orderListItem from '@/components/order/order-list-item.vue';
import uniList from "@/components/uni-ui/uni-list/uni-list.vue"
import uniListItem from "@/components/uni-ui/uni-list-item/uni-list-item.vue"
import card from "@/components/common/card.vue"

export default {
	components: {
		orderListItem,
		uniList, 
		uniListItem,
		card,
	},
	data() {
		return {
			orderItems: [
				{
					cover: '/static/images/demo/cate_01.png',
					title: '小米10',
					pprice: '2999',
					attrs: '金色 标配',
					num: 1
				},
				{
					cover: '/static/images/demo/cate_02.png',
					title: '小米11',
					pprice: '3999',
					attrs: '绿色 标配',
					num: 2
				}
			]
		};
	},
	methods: {}
};
</script>

<style></style>
